import React, { useEffect } from 'react'
import { useAppSelector, useAppDispatch } from './app/hooks'
import { addCount, addCustomCount, fetchListData } from './features/home/homeSlice'
const App: React.FC = () => {
  const count = useAppSelector(state => state.home.count)
  const list = useAppSelector(state => state.home.list)
  const loading = useAppSelector(state => state.home.loading)
  const error = useAppSelector(state => state.home.error)
  const dispatch = useAppDispatch()

  useEffect(() => {
    dispatch(fetchListData())
  }, [])

  if(loading) {
    return <div>loading...</div>
  }

  if(error) {
    return <div>网站报错： { error }</div>
  }
  return (
    <div>
      { count }
      <button onClick={() => dispatch(addCount())}>+1</button>
      <button onClick={() => dispatch(addCustomCount(10))}>+1</button>
      <ul>
        {
          list.map((v, i) => {
            return <li key={i}>{ v }</li>
          })
        }
      </ul>
    </div>
  )
}

export default App